<template>
  <draggable class="firstclassPage-container" draggable=".item" :group="{ name: 'cc', pull: 'clone', put: false }">
    <el-row :gutter="20">
      <draggable
        v-model="dlist"
        @change="listChange"
        :disabled="disabled"
        class="list-group-c"
        draggable=".item0"
        :group="{ name: 'bb', put: false }"
      >
        <el-col
          class="item0"
          :class="{ active: item.active }"
          :style="setFullBorderPadding(index)"
          :span="getEqualDivisionSpan(item)"
          tag="div"
          v-for="(item, index) in dlist"
          :key="index"
          @click.native="activeContainer(item, index)">
          <draggable :list="item.list" @change="listChange" class="list-group" draggable=".item" group="aa">
            <!-- 左侧分栏 -->
            <slot v-if="item.group === 0" class="item" name="item" v-bind="item.list"></slot>
            <!--右侧 tab分栏 -->
            <el-tabs v-model="activeName" type="card" v-else>
              <el-tab-pane
                v-for="(subitem, subindex) in item.list"
                :key="subindex"
                :label="subitem.text"
                :name="subitem.name"
              >
                <draggable
                  :list="subitem.list"
                  @change="listChange"
                  class="list-sub-group"
                  draggable=".item"
                  group="aa"
                >
                  <slot class="item" name="item" v-bind="subitem.list"></slot>
                </draggable>
              </el-tab-pane>
            </el-tabs>
          </draggable>
        </el-col>
      </draggable>
    </el-row>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";
import componentProperties from "@/utils/componentProperties";
export default {
  name: "firstclassPage",
  components: {
    draggable,
  },
  data() {
    return {
      dlist: [],
      tabs: [
        {
          text: "学科标题",
          type: "container",
          name: "sync",
        },
      ],
      activeName: "sync",
      disabled: false
    };
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    datas: {
      type: Array,
    },
  },
  watch: {
    list: {
      handler(val) {
        if (val.length > 0) {
          // this.disabled = true;
          this.dlist = val;
          console.log(this.dlist, 'this.dlist');
        } else {
          this.createDatas();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    setFullBorderPadding(index) {
      return index === 0 ? "padding-left: 0" : index === this.dlist.length - 1 ? "padding-right: 0" : "";
    },
    activeContainer(m, index) {
      m.active = true;
      this.dlist.forEach((res) => {
        if (res.group !== m.group) {
          res.active = false;
        }
      });
    },
    updatedEditView () {
      const tabs = this.datas[0].setStyle.tabs;
      this.dlist.forEach(res => {
        this.recursiveTraverse(res, (re, ii) => {
          if (re.name) {
            const el = tabs.find(item => item.name === re.name);
            if (el) {
              re.text = el.text;
            }
          }
        })
      });
      this.$emit("update:list", this.dlist);
    },
    updatedAddView (number) {
      const tabs = this.datas[0].setStyle.tabs;
      const json = {
        list: [],
        text: "学科标题",
        type: "container",
        name: "sync" + (number - 1),
        group: tabs.length + 1,
      };
      this.dlist[1].list.push(json);
      this.$emit("update:list", this.dlist);
    },
    updatedDeleteView (index) {
      this.dlist[1].list.splice(index,1);
      this.$emit("update:list", this.dlist);
    },
    listChange(val) {
      this.dlist.forEach((res) => {
        this.recursiveTraverse(res, (re, ii) => {
          if (re && re.active === true) {
            re.active = false;
          }
        });
      });
      if (val.added) {
        // val.added.element.active = true;
        // this.$forceUpdate();
        const comp = val.added.element;
        comp.icon = undefined;
        comp.setStyle = JSON.parse(
          JSON.stringify(componentProperties.get(comp.name).setStyle)
        );
        this.$emit("activeCom", val.added.element);
      }
      this.$emit("update:list", this.dlist);
    },
    recursiveTraverse(node, action) {
      action(node);
      if (!node || !node.list || node.list.length === 0) {
        return;
      }
      node.list.forEach((item) => {
        this.recursiveTraverse(item, action);
      });
    },
    createDatas() {
      this.dlist = [
        {
          list: [],
          text: "一级页左容器",
          type: "containers",
          direction: "0",
          // 指定下面的组件一定是 容器组件
          active: false,
          //setStyle: {}
          group: 0,
        },
        {
          list: [],
          text: "一级页右容器",
          type: "containers",
          direction: "0",
          abstract: {
            component: "firstpageTab",
            text: "一级页右边组件",
            style: "recoment_tab_style1",
            setStyle: {},
            ratio: "1.00",
          },
          active: true,
          //setStyle: {}
          group: 1,
        },
      ];
      const container = [];
      this.tabs.forEach((item, index) => {
        const json = {
          list: [],
          ...item,
          group: index,
        };
        container.push(json);
      });
      this.dlist[1].list = container;
      this.$emit("update:list", this.dlist);
    },
  },
  computed: {
    getEqualDivisionSpan() {
      return function (item) {
        return item.group == 0 ? 10 : 14;
      };
    },
  },
  created() {},
};
</script>

<style scoped lang="scss">
.firstclassPage-container,
.list-group-c {
  height: 100%;
}

.firstclassPage-container {
  .active {
    .list-group {
      border-color: rgb(243, 235, 3);
    }
  }

  .list-group {
    color: white;
    border: 1px salmon solid;
    text-align: center;
    height: 100%;
    cursor: pointer;
    min-height: 800px;
    border-radius: 14px;
  }

  .list-sub-group {
    height: 100%;
    cursor: pointer;
    // border: 1px rgb(167, 224, 22) solid;
    min-height: calc(100vh - 100px);
    border-radius: 14px;
  }
}
</style>
<style lang="scss">
.firstclassPage-container {
  .el-row {
    height: 100% !important;
    margin: 0 !important;
  }

  .el-col {
    height: 100%;
  }
  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__item {
    height: auto;
    // writing-mode: tb-rl;
  }

  .el-tabs--left .el-tabs__header.is-left {
    margin-right: 0;
    padding-top: 15px;
  }

  .el-tabs__item {
    // padding: 20px 0;
    color: #83f0c9;
    font-weight: 600;
    letter-spacing: 0.3em;
    background: linear-gradient(180deg, #08967c 0%, #07816f 100%);
    // border-radius: 10px 0px 0px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .el-tabs__item.is-active {
    color: #ffdb7a;
    background: #0a4c48;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
}
</style>
